{extend name="base" /}
{block name="body"} 
<div class="layui-card">
    <div class="p-3">
                <form action="{:request()->url()}" class="layui-form" method="get">
            
               <div class="layui-input-inline" style="width: 70%;">
                        <input type="text" id="subscribe" name="subscribe" placeholder="输入字段数据" autocomplete="off" class="layui-input">
                  
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layui-btn-normal"><i class="fa fa-search"></i> 搜索</button>
                </div>
                </form>
           
        </div>
 <div class="layui-card-header">
    <table id="tableList" lay-filter="tableList"></table>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
      <button class="layui-btn layui-btn-sm" id="dropdownButton">
      下拉按钮 
      <i class="layui-icon layui-icon-down layui-font-12"></i>
    </button>
      </div>
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button style="border-radius: 5px;" class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete"><i class="fa fa-trash-o"></i>{:__('Multiple choice deletion')}</button>
        <button style="border-radius: 5px;" class="layui-btn layui-btn-sm" lay-event="refresh"><i class="layui-icon layui-icon-refresh-3"></i>{:__('Refresh')}</button>
      <a href="{:url('keyword/add')}" style="border-radius: 5px;" class="layui-btn layui-btn-sm ajax-iframe" data-width="410px" data-height="310px"><i class="layui-icon layui-icon-add-circle"></i>&nbsp;{:__('newly added')}</a>&nbsp;<a style="border-radius: 5px;" href="{:url('keyword/statuslog')}?uid=0" class="layui-btn layui-btn-danger ajax-delete layui-btn-sm"><i class="layui-icon layui-icon-error"></i> 全部禁用&nbsp;</a><a style="border-radius: 5px;" href="{:url('keyword/statuslog')}?uid=1" class="layui-btn layui-btn-danger ajax-delete layui-btn-sm"><i class="layui-icon layui-icon-success"></i> 全部启用</a>
    </div>
</script>

    <!-- 表格操作列 -->
    <script type="text/html" id="tableTBTrack">
        <a href="{:url('keyword/edit')}?id={{d.id}}" class="layui-btn layui-btn-sm ajax-iframe" data-width="410px" data-height="310px"><i class="layui-icon layui-icon-edit"></i>{:__('modify')}</a>
        <a href="{:url('keyword/del')}?id={{d.id}}" class="layui-btn layui-btn-danger layui-btn-sm ajax-delete" tiptext="确认删除{{d.word}}"><i class="layui-icon layui-icon-delete"></i>{:__('delete')}</a>
    </script>
<script type="text/html" id="status">
        <input type="checkbox" name="status" lay-skin="switch" lay-filter="*" lay-text="{:__('Enable')}|{:__('Disabled')}" data-url="{:url('keyword/edit')}?id={{d.id}}" {{d.status==1?'checked':''}}>
    </script>
</div>
{/block}

{block name="js"}
<script>
    layui.use(['layer', 'form', 'table', 'util', 'dropdown'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        var admin = layui.admin;
        var dropdown = layui.dropdown;
       

         //监听单元格编辑
          table.on('edit(tableList)', function(obj){
             var value = obj.value //得到修改后的值
                 ,data = obj.data //得到所在行所有键值
                 ,field = obj.field; //得到字段   
                  //console.log(obj.data.create_time);
                  var date = new Date(obj.data.create_time); 
                  var create_time = Date.parse(date);  
                   obj.data.create_time = create_time/1000; 
                   var load = layer.load(1, {time: 3*1000}); //加载动画 //加载层
            $.ajax({
                url: "{:url('keyword/edit')}?id=" +obj.data.id,
                dataType:'json',
                type: 'POST',
                timeout:5000,
                data:data,
                success:function(res){
                    if(res.code == 0){
                    layer.msg('操作成功');
                     setTimeout(function () {
                    //parent.location.reload();
                }, 1000);
                    }else{
                    layer.msg(res.msg, {icon: 0});
                    }
                },
                complete:function(XMLHttpRequest,status){
                    if(status!='success'){
                        layer.msg("请求出错，请稍候再试");
                    }
                }.bind(this)
            });
     });
        // 渲染回访表格
        table.render({
            elem: '#tableList',
            toolbar: '#toolbarDemo',  //开启头部工具栏，并为其绑定左侧模板
            url: "{:url('keyword/index_json',['subscribe'=>input('subscribe')])}",
            page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
            layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'] //自定义分页布局
                 //,curr: 5 //设定初始在第 5 页
            ,groups: 5 //只显示 1 个连续页码
            ,first: '<em>首页</em>' //不显示首页
            ,last: '<em>尾页</em>' //不显示尾页
            ,prev: '<em>上一页</em>'
            ,next: '<em>下一页</em>'
            ,limit:'15'
            ,limits:['15','30','50','100','200','500']
            } , 
            cellMinWidth: 100,
            size:'lg',even:true,
            cols: [[
                  {
                    type: 'checkbox'
                }, {
                    type:'numbers',
                    title:'#', 
                    width: 100
                }, {
                    field: 'word', 
                    title: '敏感词', 
                    align: 'center', 
                    width: 200, 
                    edit: 'text'
                }, {
                    field: 'create_time', 
                    title: '创建时间', 
                    align: 'center', 
                    width: 160
                }, {
                    field: 'update_time', 
                    title: '更新时间', 
                    align: 'center', 
                    width: 160
                }, {
                    align: 'center', 
                    sort: true, 
                    title: '状态',
                    templet:'#status',
                    width:90
                }, {
                    align: 'center', 
                    toolbar: '#tableTBTrack', 
                    title: '操作', 
                    minWidth: 200
                }
            ]],
    done: function(){
      var id = this.id;
      // 下拉按钮测试
      dropdown.render({
        elem: '#dropdownButton', // 可绑定在任意元素中，此处以上述按钮为例
        data: [{
          id: 'add',
          title: '添加数据'
        },{
          id: 'update',
          title: '多选删除'
        },{
          id: 'refresh',
          title: '启用刷新'
        },{
          id: 'Disabled',
          title: '全部禁用'
        },{
          id: 'Enable',
          title: '全部启用'
        }],
        // 菜单被点击的事件
        click: function(obj){
          var checkStatus = table.checkStatus(id)
          var data = checkStatus.data; // 获取选中的数据
          switch(obj.id){
            case 'add':
              layer.open({
                title: '添加数据',
                type: 2,
                area: ['400px','50%'],
                content: "{:url('keyword/add')}",
              });
            break;
            case 'update':
              if(data.length <= 0) return layer.msg('请选择一行');
             
                    var ids = [];
                    data.forEach(item => {
                        ids.push(item.id);
                    });
                    if (ids <= 0) {return layer.msg('{:__('Please select a line')}', {icon: 0});}
                layer.confirm('确定删除?', {icon: 0}, function (index) {
                 var index = layer.msg('提交中，请稍候', {icon: 16,time: false,shade: 0.3});
                  $.post('/keyword/del', {id: ids}, function (res) {
                        if (res.code == 0) {
                            layer.msg(res.msg, {icon: 1});
                            setTimeout(function () {
                                location.reload();  // 页面刷新
                            }, 1500)
                        } else {
                            layer.msg(res.msg, {icon: 0});
                        }
                    }, 'json');
                  });
              
            break;
            case 'refresh':
                 location.reload();
              layer.msg('刷新成功！');
            break;
            case 'Disabled':
                  layer.confirm('确定全部禁用', {icon: 2}, function (index) {
                 var index = layer.msg('提交中，请稍候', {icon: 16,time: false,shade: 0.3});
                  $.post('/keyword/statuslog?uid=0', {id: ids}, function (res) {
                        if (res.code == 0) {
                            layer.msg(res.msg, {icon: 1});
                            setTimeout(function () {
                                location.reload();  // 页面刷新
                            }, 1500)
                        } else {
                            layer.msg(res.msg, {icon: 0});
                        }
                    }, 'json');
                  });
            break;
            case 'Enable':
                  layer.confirm('确定全部启用', {icon: 1}, function (index) {
                 var index = layer.msg('提交中，请稍候', {icon: 16,time: false,shade: 0.3});
                  $.post('/keyword/statuslog?uid=1', {id: ids}, function (res) {
                        if (res.code == 0) {
                            layer.msg(res.msg, {icon: 1});
                            setTimeout(function () {
                                location.reload();  // 页面刷新
                            }, 1500)
                        } else {
                            layer.msg(res.msg, {icon: 0});
                        }
                    }, 'json');
                  });
            break;
          }
        }
      });
    },
        
            parseData: function(res){ //res 即为原始返回的数据
                return {
                  "code": res.code, //解析接口状态
                  "msg": res.msg, //解析提示文本
                  "count": res.data.total, //解析数据长度
                  "data": res.data.data //解析数据列表
                };
            }
        });

    });
          
</script>
{/block}